<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
		     fieldset{
		     	width: 20%;
		     	height: 300px;
		     }
          /*   这里是变色效果*/
			.focus{
				border: 1px solid #f00;
				background:#E7E7E7;
			}
			.msg {
				position:relative;
				
			}
			.msg label{
				position: absolute;
			}
			.msg textarea{
				    position: absolute;
				    top:26px;
				    width: 100%;
				    height: 168px
			}
			#comment{
				text-align: left;
				width: 35%;
				height: 400px;
			}
			.content{
				position: relative;
				float: left;
				margin: 10px;
			}
			.content span{
				font-size: 13px;
				cursor: pointer;
				background: #2B93D2;
				
			}
			.reg{
				position: relative;
				width: 60%;
				margin-top: -800px;
				right: 50px;
				float: right;
				height: 1000px;
				background:#E31E1C;
			
			}
			.mag {
				position:relative;
				
			}
			.mag label{
				position: absolute;
			}
			.mag textarea{
				    position: absolute;
				    top:26px;
				    width: 94%;
				    right: 10px;
				    height: 168px
			}
			.sub{
				position: relative;
    			top: 197px;
			}
				.formtips{width:100px;padding:2px; font-size: 10px;}
				.onError{
				    background:#FFE0E9 url(img/reg3.gif) no-repeat 0 center;
				}
				.onSuccess{
				    background:#E9FBEB url(img/reg4.gif) no-repeat 0 center;
				}
				.high{
				    color:red;
				}
				input  {
					width:140px;
				}
				.int span {
					margin: 0;
				}
		</style>
		
	</head>
	<body>
		<form action="#" method="POST" id="regForm">
			<fieldset>
				<legend>个人信息</legend>
				<div>
					<label for="username">名称:</label>
					<input id="username" type="text" placeholder="用户名"  />
				</div>
				<div>
					<label for="pass">名称:</label>
					<input id="pass" type="password" placeholder="密码"/> 
				</div>
				<div class="msg">
					<label for="msg">详细信息:</label>
					<textarea id="msg"></textarea>
				</div>
			</fieldset>
		</form>
		<form>
			<div class="msg1">
				<div class="msg1_caption">
					<span class="bigger">放大</span>
					<span class="smaller">缩小</span>
					<span class="up">下拉</span>
					<span class="down">上升`</span>
				</div>
				<div>
					<textarea id="comment" rows="30" cols="20">
						
					</textarea>
				</div>
			</div>
		</form>
		<form>
			你爱好的运动是?<br />
			<input type="checkbox" name="items" value="足球" /> 足球
			<input type="checkbox" name="items" value="篮球" /> 篮球
			<input type="checkbox" name="items" value="羽毛球" /> 羽毛球
			<input type="checkbox" name="items" value="乒乓秋" /> 乒乓球
			<br />
			<input type="button" id="checkAll" value="全选" />
			<input type="button" id="checkNo" value="全补选" />
			<input type="button" id="checkRev" value="反选" />
			<input type="button" id="send" value="提交" />
		</form>
		<div class="content">
			<select multiple="" id="select1" style="width: 100px; height: 160px;">
				<option value="1">选项1</option>
				<option value="2">选项2</option>
				<option value="3">选项3</option>
				<option value="4">选项4</option>
				<option value="5">选项5</option>
				<option value="6">选项6</option>
				<option value="7">选项7</option>
				<option value="8">选项8</option>
			</select>
			<div>
				<span id="add">选中添加到右边&gt;&gt;</span><br />
				<span id="add_all">全部添加到右边&gt;&gt;</span>
			</div>
		</div>
		<div class="content">
			<select multiple id="select2" style="width: 100px;height: 160px;">
			</select>
			<div>
				<span id="remove">&lt;&lt;选中删除到左边</span><br />
				<span id="remove_all">&lt;&lt;全部删除到左边</span>
			</div>
			<div>
				<span id="del">&lt;&lt;选中删除</span><br />
				<span id="delall">&lt;&lt;全部删除</span>
			</div>
		</div>
		<div class="reg">
			<form method="post" action="post">
				<br />
				<br />
				<br />
				<br />
			
		
		
		
		
		<script>
			//选中input给一个变色效果
			$(function(){
				$(":input").focus(function(){
					$(this).addClass("focus");
				})
				$(":input").blur(function(){
						$(this).removeClass("focus");
				})
				
				var $comment = $('#comment');
				$('.bigger').click(function(){
					if($comment.height()<500){
						if(!$comment.is(":animated")){
						//重新设置高度,在原有的基础上加50
//						$comment.height($comment.height()+50);
                        $comment.animate({ height: "+=50"},400)
                       }
                        
					}
				});
				$('.smaller').click(function(){
					if($comment.height()>50){
						if(!$comment.is(":animated")){
						//重新设置高度,在原有的基础上减50
//						$comment.height($comment.height()-50)
						 $comment.animate({ height: "-=50"},400)
					}}
				})
				
				$('.up').click(function(){
					if(!$comment.is(":animated")){
						$('#comment').animate({scrollTop :"+=50"},400)
					}
				})
				$('.down').click(function(){
					if(!$comment.is(":animated")){
						$('#comment').animate({scrollTop :"-=50"},400)
					}
				})
				
//				//全选或全不选
//	$("#all").click(function(){   
//  	if(this.checked){   
//      	$("#list :checkbox").prop("checked", true);  
//  	}else{   
//		$("#list :checkbox").prop("checked", false);
//  	}   
// 	}); 
//	//全选  
//  $("#selectAll").click(function () {
//       $("#list :checkbox,#all").prop("checked", true);  
//  });  
//	//全不选
//  $("#unSelect").click(function () {  
//       $("#list :checkbox,#all").prop("checked", false);  
//  });  
//  //反选 
//  $("#reverse").click(function () { 
//       $("#list :checkbox").each(function () {  
//            $(this).prop("checked", !$(this).prop("checked"));  
//       });
//		 allchk();
//  });
//	
//	//设置全选复选框
//	$("#list :checkbox").click(function(){
//		allchk();
//	});
// 
//	//获取选中选项的值
//	$("#getValue").click(function(){
//		var valArr = new Array;
//      $("#list :checkbox[checked]").each(function(i){
//			valArr[i] = $(this).val();
//      });
//		var vals = valArr.join(',');
//    	alert(vals);
//  });
//}); 
//function allchk(){
//	var chknum = $("#list :checkbox").size();//选项总个数
//	var chk = 0;
//	$("#list :checkbox").each(function () {  
//      if($(this).prop("checked")==true){
//			chk++;
//		}
//  });
//	if(chknum==chk){//全选
//		$("#all").prop("checked",true);
//	}else{//不全选
//		$("#all").prop("checked",false);
//	}
//}

				
				
				
				  var a = 0;
				$('#checkAll').click(function(){
					   a = 0;
					  if (a==0)
					  {
					  	$('[name=items]:checkbox').prop("checked",true)
					  }
					
					})
				$('#checkNo').click(function(){
					a = 1;
					  if (a==1)
					  {
					  	$('[name=items]:checkbox').prop("checked",false)
					  }
				})
				$('#checkRev').click(function(){
					
					$('[name=items]:checkbox').each(function(){
				     this.checked=!this.checked;
					});
				})
				$('#send').click(function(){
					a = 4;
					var str="你选中的是:\n\r";
					
					$('[name=items]:checkbox:checked').each(function(){
					 str+=$(this).val()+"\r\n";
					});
					alert(str)
				})
				$("#del").click(function(){
				var a1 = confirm("真的要删除所选项吗?");
					if(a1==true){
					var $options = $('#select1 option:selected');
					var $remove = $options.remove();
					}
				})
				$('#add').click(function(){
					var $options = $('#select1 option:selected');
					var $remove = $options.remove();
					$remove.appendTo('#select2');
				});
				$('#add_all').click(function(){
				  var $options = $('#select1 option');
				  $options.appendTo('#select2')
				})
				$('#remove').click(function(){
					var $options = $('#select2 option:selected');
					var $remove = $options.remove();
					$remove.appendTo('#select1');
				});
				$('#remove_all').click(function(){
				  var $options = $('#select2 option');
				  $options.appendTo('#select1')
				})
			})
			//必填事件
//			$('.reg form:input.required').each(function(){
//				var $required = $("<strong class='high'>*</strong>");
//				$(this).parent().append($required);
//			});
//			$('#username1').blur(function(){
//				var $parent = $(this).parent();
//				//验证用户名
//				if($(this).is('#username1')){
//					if(this.value==""||this.value.length<6){
//						var errorMsg = "请至输入6位用户名";
//						$parent.append('<span class="formtips onError">'+errorMsg+'</span>');}
//					else {
//						var okMsg = "输入正确";
//						$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
//					}
//				}
//				//验证邮箱
//				if($(this).is('#email')){
//					if(this.value==""||(this.value!=""&&! /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(this.value)))
//					{
//						var errorMsg = "请输入正确的邮箱";
//						$parent.append('<span> class="formtips onError">'+errorMsg+'</span>');}
//					else {
//						var okMsg = "输入正确";
//						$parent.append('<span> class="formtips onSuccess">'+okMsg+'</span>');
//					}
//				}
//				if($(this).is('#pass2')){
//					var c =$("#pass1").val()
//					if(this.value==""||this.value!=c)
//					{
//						var errorMsg = "与设定密码不符";
//						$parent.append('<span> class="formtips onError">'+errorMsg+'</span>');}
//					else {
//						var okMsg = "输入正确";
//						$parent.append('<span> class="formtips onSuccess">'+okMsg+'</span>');
//					}
//				}	
//				
//			})
			
		</script>
	</body>
</html>
